<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VNode的约束</title>
</head>
<body>

    <div id="app">
        <ele>
            <div>
                <child></child>
            </div>
        </ele>
    </div>

    <script src="./utils/vue.min.js"></script>
    
    <script>
        // 约束一：是组件的VNode不可以重复使用

        // var child = {
        //     template: '<div>text</div>'
        // }; 

        var child = {
            render: function (createElement) {
                return createElement('p','text');
            }
        }

        // Vue.component('ele',
        //     {
        //         render: function (createElement) {

        //             let childNode = createElement(child);

        //             return createElement(
        //                 'div',
        //                 [
        //                     childNode,
        //                     childNode
        //                 ]
        //             );
        //         }
        //     }
        // );
        // 结论：是组件的VNode可以重复渲染；

        // 约束二：包含组件的slot的VNode

        Vue.component('child',child);

        Vue.component('ele',{
            render: function (createElement) {
                return createElement('div',
                [
                    this.$slots.default,
                    this.$slots.default,
                    this.$slots.default
                ]);
            }
        });

        // 结论：包含组件的slot的VNode可以重复渲染
        var app = new Vue({
            el: '#app'
        });

    </script>
    
</body>
</html>